<template>
  <div>
    <a-alert
      message="退款申请注意事项"
      description="提示内容"
      type="warning"
      show-icon
    />
    <a-divider />
    <a-form-model
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="退款类型">
        <a-radio-group>
          <a-radio :value="1">退合同</a-radio>
          <a-radio :value="2">退部分业务</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="申请单">
        <a-upload-dragger
          name="file"
          :multiple="true"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            拖拽要上传的文件至上传区域
          </p>
        </a-upload-dragger>
      </a-form-model-item>
      <a-form-model-item label="原因阐述">
        <a-textarea :rows="4"></a-textarea>
      </a-form-model-item>
      <a-form-model-item label="上传聊天截图">
        <a-upload-dragger
          name="file"
          :multiple="true"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            拖拽要上传的文件至上传区域
          </p>
        </a-upload-dragger>
      </a-form-model-item>
    </a-form-model>
    <s-table
      ref="table"
      size="small"
      :columns="columns"
      :data="data"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template slot="price0">
        <a-input value="500" style="width: 100px"/>
      </template>
      <template slot="footer">
        <div style="color: #f00;font-weight: 700;">
          退款总计：1000
        </div>
      </template>
    </s-table>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import contractColumns from '@/columns/contract'

  export default {
    components: {
      STable
    },
    name: 'RefundForm',
    data () {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        selectedRowKeys: [],
        columns: contractColumns.business4,
        data: () => {
          return new Promise(resolve => {
            resolve({
              data: [
                {
                  business_no: 'YW20220608KQVRHZ',
                  business_name: '商标申请',
                  status: '材料待提交',
                  price: '5000.00',
                  price1: '3500.00'
                },
                {
                  business_no: 'YW20220608KQVRHZ',
                  business_name: '商标驳回',
                  status: '已提交至官方',
                  price: '2000.00',
                  price1: '500.00'
                }
              ]
            })
          })
        }
      }
    },
    methods: {
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      }
    }
  }
</script>

<style scoped>

</style>
